import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Statistic, Row, Col, Typography, Divider ,Spin,Alert} from 'antd';
import { Pie, Line } from '@ant-design/plots';
const { Title } = Typography;
export default function Index() {
  const [loading,setLoading] = useState(true)
  const [mCount, setMcount] = useState(1) //男数量
  const [fCount, setFcount] = useState(1)//女数量
  const [nCount, setNcount] = useState(1)//保密数量
  const [gift, setGift] = useState([]); //最近7天礼物兑换数量
  const [changeCount,setChangeCount] = useState(0) //可交换物品数量
  const [changeTimeCount,setChangeTimeCount] = useState(0) //已完成交换次数
  const [userCount,setUserCount] = useState(0)
  const [orgCount,setOrgCount] = useState(0)
  const data = [
    {
      type: '男',
      value: mCount,
    },
    {
      type: '女',
      value: fCount,
    },
    {
      type: '保密',
      value: nCount,
    },
  ];

  const config = {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
    label: {
      type: 'inner',
      offset: '-30%',
      content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
      style: {
        fontSize: 14,
        textAlign: 'center',
      },
    },
    interactions: [
      {
        type: 'element-active',
      },
    ],
  };

  const lineConfig = {
    data: gift,
    padding: 'auto',
    xField: 'time',
    yField: 'value',
    xAxis: {
      // type: 'timeCat',
      tickCount: 7,
    },
  };
  useEffect(async () => {
    const resp = await axios.get('http://localhost:8080/sysData')
    setLoading(false)
    setChangeCount(resp.data.changeCount);
    setChangeTimeCount(resp.data.changeTimeCount);
    const genderList = resp.data.genderList
    const historyGifts = resp.data.historyGifts;
    setGift(historyGifts)
    setUserCount(resp.data.userCount)
    setOrgCount(resp.data.orgCount)
    genderList.forEach(element => {
      if (element.gender == 0) {
        setMcount(element.count)
      }
      if (element.gender == 1) {
        setFcount(element.count)
      }
      if (element.gender == 2) {
        setNcount(element.count)
      }
    });

  }, [])
  return (
    <div className="animate__animated animate__fadeIn">
     <Title  className="animate__animated animate__backInLeft">管理员,欢迎你</Title>
     <Divider></Divider>
    <Spin spinning={loading}>
      <Row >
        <Col span={12}>
        <Statistic title="累计用户" value={userCount} className="animate__animated animate__flipInX" />
        </Col>
        <Col span={12}>
          <Statistic title="累计机构" value={orgCount} precision={0} className="animate__animated animate__flipInX"/>
        </Col>
        <Col span={12}>
          <Statistic title="物品数量" value={changeCount}  className="animate__animated animate__flipInX"/>
        </Col>
        <Col span={12}>
          <Statistic title="交换次数" value={changeTimeCount} className="animate__animated animate__flipInX"/>
        </Col>
      </Row>
      </Spin>
      <Divider></Divider>
      <Spin spinning={loading}>
      <Row >
        <Col span={12}>
          <Title level={4}>平台性别分布</Title>
          <Pie {...config} />
        </Col>
        <Col span={12}>
        <Title level={4}>最近兑换礼物数量</Title>
          <Line {...lineConfig} />
        </Col>
      </Row>
      </Spin>
    </div>


  )
}
